<!DOCTYPE html>
<html  >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="teedoc, theme plugin, themes, plugin">
    <meta name="description" content="teedoc theme plugin">
    <meta name="generator" content="teedoc">
    <meta name="markdown-generator" content="teedoc-plugin-markdown-parser">
        <link rel="stylesheet" href="/static/css/theme_default/prism.min.css" type="text/css"/>
        <link rel="stylesheet" href="/static/css/theme_default/dark.css" type="text/css"/>
        <link rel="stylesheet" href="/static/css/theme_default/light.css" type="text/css"/>
        <link rel="stylesheet" href="/static/css/custom.css" type="text/css"/>
        <script src="/static/js/theme_default/jquery.min.js"></script>
        <script src="/static/js/theme_default/pre_main.js"></script>
        <link rel="stylesheet" href="/static/css/search/style.css" type="text/css"/>
        <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?91ac08174b63c5c88f71f8a94004a1fe";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
    <title>teedoc theme plugin - teedoc</title>
</head>
<body>
    
            <div id="navbar">
                <div id="navbar_menu">
                    <a class="site_title" href="/en/"><img class="site_logo" src="/static/image/logo.png" alt="teedoc logo"><h2>teedoc</h2></a>
                    <a id="navbar_menu_btn"></a>
                </div>
                <div id="navbar_items">
                    <div>
                        <ul id="nav_left">
<li class="active"><a  href="/get_started/en/">Install</a></li>
<li class=""><a  href="/develop/en/">Develop</a></li>
</ul>

                    </div>
                    <div>
                        <ul id="nav_right">
<li class=""><a target="_blank" href="https://github.com/neutree/teedoc">github</a></li>
<li class="sub_items "><a  href="">语言: English</a><ul><li class=""><a  href="/get_started/zh/">中文</a></li>
<li class="active"><a  href="/get_started/en/">English</a></li>
</ul></li>
</ul>

                        <ul class="nav_plugins"><li><a id="themes" class="light"></a></li></ul><ul class="nav_plugins"><li><a id="search"><span class="icon"></span><span class="placeholder">Search</span>
                            <div id="search_hints">
                                <span id="search_input_hint">Keywords separated by space</span>
                                <span id="search_loading_hint">Loading, wait please ...</span>
                                <span id="search_download_err_hint">Download error, please check network and refresh again</span>
                                <span id="search_other_docs_result_hint">Result from other docs</span>
                                <span id="search_curr_doc_result_hint">Result from current doc</span>
                            </div></a></li></ul>
                    </div>
                </div>
            </div>
    
        <div id="wrapper">
            
            <div id="sidebar_wrapper">
                <div id="sidebar">
                    <div id="sidebar_title">
                        
                    </div>
                    <ul class="show">
<li class="not_active with_link"><a href="/get_started/en/index.html"><span class="label">Introduction to teedoc</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/en/install/index.html"><span class="label">Install teedoc</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/en/usage/start.html"><span class="label">Start writing document</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/en/usage/write_attention.html"><span class="label">Pay attention to when writing documents</span><span class=""></span></a></li>
<li class="active_parent with_link"><a href="/get_started/en/plugins/index.html"><span class="label">Plugin</span><span class="sub_indicator"></span></a><ul class="show">
<li class="active with_link"><a href="/get_started/en/plugins/themes.html"><span class="label">Theme Plugin</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/en/plugins/others.html"><span class="label">Other plugins</span><span class=""></span></a></li>
</ul>
</li>
<li class="not_active with_link"><a href="/get_started/en/syntax/syntax_markdown.html"><span class="label">markdown syntax</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/en/usage/deploy.html"><span class="label">Deployment</span><span class="sub_indicator sub_indicator_collapsed"></span></a><ul class="">
<li class="not_active with_link"><a href="/get_started/en/usage/deploy_github_pages.html"><span class="label">Deploy to github</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/en/usage/deploy_nginx.html"><span class="label">Use nginx to deploy to the server</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/en/usage/deploy_cdn.html"><span class="label">Use CDN to accelerate website</span><span class=""></span></a></li>
</ul>
</li>
<li class="not_active with_link"><a href="/get_started/en/usage/seo.html"><span class="label">SEO (Optimize for Search Engines)</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/en/usage/sites.html"><span class="label">Website using teedoc</span><span class=""></span></a></li>
<li class="not_active no_link"><a><span class="label">More samples</span><span class="sub_indicator sub_indicator_collapsed"></span></a><ul class="">
<li class="not_active no_link"><a><span class="label">Second-level subdirectory example</span><span class="sub_indicator sub_indicator_collapsed"></span></a><ul class="">
<li class="not_active no_link"><a><span class="label">Sample three-level sub-directory</span><span class="sub_indicator sub_indicator_collapsed"></span></a><ul class="">
<li class="not_active with_link"><a href="/get_started/en/more/example_docs/doc1.html"><span class="label">Article 1</span><span class=""></span></a></li>
</ul>
</li>
<li class="not_active with_link"><a href="/get_started/en/more/example_docs/doc2.html"><span class="label">Article 2</span><span class=""></span></a></li>
</ul>
</li>
<li class="not_active with_link"><a href="https://github.com/teedoc/teedoc" target="_blank"><span class="label">This is a external link</span><span class=""></span></a></li>
</ul>
</li>
</ul>

                </div>
            </div>
            <div id="menu_wrapper">
                                    <div id="menu">
                                    </div>
                                </div>
            <div id="article">
                <div id="content_wrapper">
                    <div id="content_body">
                        <div id="article_title">
                            <h1>teedoc theme plugin</h1>
                        </div>
                        <div id="article_tags">
                            <ul></ul>
                        </div>
                        <div id="article_content">
                            <h2 id="teedoc-plugin-theme-default-default-theme-plugin"><code>teedoc-plugin-theme-default</code>: default theme plugin</h2>

<h3 id="plugin-configuration">Plugin configuration</h3>

<p>Configure the plugin in <code>site_config.json</code></p>

<pre><code class="json language-json">    "plugins": {
        "teedoc-plugin-theme-default":{
            "from": "pypi",
            "config": {
                "dark": true,
                "env":{
                    "main_color": "#4caf7d"
                },
                "css": "/static/css/custom.css",
                "js": "/static/js/custom.js",
                "code_highlight_css":  "/static/css/prism.css",
                "code_highlight_js": "/static/js/prism.js"
            }
        }
    }
</code></pre>

<ul>
<li><code>main_color</code>: theme main color</li>
<li><code>css</code>: <code>css</code> file <code>URL</code>, which can override the default style and will be inserted into the <code>head</code> tag of the page</li>
<li><code>js</code>: <code>js</code> file <code>URL</code>, can write <code>js</code> program, it will be loaded at the end of the page</li>
</ul>

<p>The default code highlighting uses <a href="https://prismjs.com/">prismjs</a>, and the support of some common languages ​​is checked by default. <code>js</code> file + <code>css</code> file totals about <code>100KiB</code>, if you need the code If you can’t highlight, or want to save traffic or reduce loading time, you can go to <a href="https://prismjs.com/download.html#themes=prism-tomorrow&amp;languages=markup+css+clike+javascript+bash+c+cpp+cmake+coffeescript+docker+go+ini+java+json+json5+kotlin+latex+less+lua+makefile+markdown+markup-templating+objectivec+php+powershell+python+jsx+tsx+ruby+rust+sass+scss+shell-session+sql+swift+textile+typescript+yaml&amp;plugins=line-numbers+highlight-keywords+toolbar+copy-to-clipboard+match-braces">here</a> Check the default check and check the language and Function, finally get a <code>css</code> file and a <code>js</code> file in the <code>static/js</code> directory, and then set the <code>URL</code> in <code>site_config.json</code>:</p>

<pre><code class="json language-json">    "route": {
        "assets": {
            "/static/": "static"
        }
    }
</code></pre>

<blockquote>
  <p>this config will due to files in <code>static</code> dir will be copied to <code>static</code> dir of out dir.</p>
</blockquote>

<ul>
<li><code>code_highlight_css</code>: <code>code</code> highlighting <code>css</code> file <code>URL</code>, will replace the default highlighting <code>css</code> file, and will be inserted into the <code>head</code> tag of the page</li>
<li><code>code_highlight_js</code>: <code>code</code> highlighting <code>js</code> file <code>URL</code>, will replace the default highlighting <code>js</code> file, and will be loaded at the end of the page</li>
</ul>

<p>Supports <code>day</code> and <code>night</code> modes. The night mode will add a <code>dark</code> class to the <code>body</code>. If you want the <code>css</code> style of the night mode, you can modify it based on this class name</p>

<h3 id="class-support">class support</h3>

<p>The theme supports several commonly used <code>class</code> and <code>id</code>, which can be set in <code>config.json</code>(/<code>config.yaml</code>) or the <code>class</code> and <code>id</code> keywords in the <code>.md</code> file. You can use this style directly</p>

<p>For example, set in <code>config.json</code></p>

<pre><code class="json language-json">{
     "class": "language_zh",
     "navbar": {
         ...
     }
}
</code></pre>

<p>Then the <code>html</code> tags of all generated pages under this document will contain this class. For example, <code>language_zh</code> will change the title of the page directory on the right from Roman numerals to Chinese <code>one, two, three...</code></p>

<p><code>class</code> has:</p>

<ul>
<li><code>language_zh</code>: Change the title of the page directory on the right from Roman numerals to Chinese <code>one, two, three...</code></li>
<li><code>md_page</code>: Ordinary markdown files are rendered into html pages, you can add this class, it will be displayed in the center instead of left-aligned</li>
</ul>

                        </div>
                    </div>
                    <div id="previous_next">
                        <div id="previous">
                            <a href="/get_started/en/plugins/index.html"><span class="icon"></span><span class="label">Plugin</span></a>
                        </div>
                        <div id="next">
                            <a href="/get_started/en/plugins/others.html"><span class="label">Other plugins</span><span class="icon"></span></a>
                        </div>
                    </div>
                </div>
                <div id="toc">
                    <div>
                        <ul>
  <li><a href="#teedoc-plugin-theme-default-default-theme-plugin"><code>teedoc-plugin-theme-default</code>: default theme plugin</a>
  <ul>
    <li><a href="#plugin-configuration">Plugin configuration</a></li>
    <li><a href="#class-support">class support</a></li>
  </ul></li>
</ul>

                    </div>
                </div>
            </div>
        </div>
        <a id="to_top" href="#"></a>
        <div id="doc_footer">
                        
            <div id="footer">
                <div id="footer_top">
                    <ul>
<li><a>Links</a><ul><li><a target="_blank" href="https://github.com/neutree/teedoc">Build with teedoc</a></li>
<li><a target="_blank" href="https://neucrack.com">Copyright © 2021 Neucrack</a></li>
<li><a  href="/sitemap.xml">Sitemap</a></li>
</ul>
</li>
<li><a>Source code</a><ul><li><a target="_blank" href="https://github.com/neutree/teedoc">github</a></li>
<li><a target="_blank" href="https://github.com/teedoc/teedoc.github.io">website source files</a></li>
</ul>
</li>
</ul>

                </div>
                <div id="footer_bottom">
                    <ul>
<li><a target="_blank" href="https://beian.miit.gov.cn">*ICP备********号-1</a></li>
<li><a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">*公网安备**************号</a></li>
</ul>

                </div>
            </div>
                    </div>
</body>
<script src="/static/js/theme_default/main.js"></script>
<script src="/static/css/theme_default/prism.min.js"></script>
<script src="/static/js/custom.js"></script>
<script src="/static/js/search/main.js"></script>
</html>
